<template>
	<view>	
		<cu-custom  bgColor="bg-black-two"  :isBack="false">
			<block slot="content">首页</block>
		</cu-custom>
		
		
		<view class="my-bg">
			<view class="flex solid-bottom align-start margin-bottom-lg">
				<view class="flex-sub radius text-center">
					<view class="text-xxl text-green-two">{{machineCount}}</view>
					<view class="text-gray">设备总数</view>
				</view>
				<view class="flex-sub radius text-center"></view>
				<view class="flex-sub radius text-center">
					<view class="text-xxl text-green-two">{{machineRunCount}}</view>
					<view class="text-gray">运行中</view>
				</view>
			</view>			
			<view class="flex solid-bottom align-start">
				<view class="flex-sub radius text-center">
					<view class="text-xxl text-white">{{parseFloat(productWeight).toFixed(2)}}</view>
					<view class="text-gray">产重/kg</view>
				</view>
				<view class="flex-sub radius text-center">
					<view class="text-xxl text-white">{{productNum}}</view>
					<view class="text-gray">产量/件</view>
				</view>
				<view class="flex-sub radius text-center">
					<view class="text-xxl text-white">{{parseFloat(productEnergy).toFixed(2)}}</view>
					<view class="text-gray">能耗/kw</view>
				</view>	
			</view>
		</view>
	
		<view class="my-bg">
			<view class="text-white margin-bottom-xs">设备开机时长/h</view>
			<view class="lockParent" style="height: 150px">
				<l-echart ref="chartBar"></l-echart>
				<!-- 判断模块是否解锁 0：加锁，1：解锁 -->
				<view v-if="!moduleLockList.shouye1.status"  
					@click="showModal('DialogModal1',moduleLockList.shouye1)"
					class="lockView">
					<image src="@/static/image/lock.png" mode="aspectFit"></image>
					<view class="locktext">
						解锁此模块提高生产效率
					</view>
				</view>
			</view>			
		</view>

		
		
		<view class="my-bg">
			<view class="text-white margin-bottom-xs">周开机率</view>
			<view class="lockParent">
				<view class="flex">
					<view style="width: 45%;height: 120px;margin-left: -5px;">
						<l-echart ref="chartGauge1"></l-echart>
					</view>
					<view class="text-center" style="width: 20%;height: 120px;padding-top: 30px;">
						<view style="color: #23CE9A;">
							<text style="font-size: 18px;font-weight: bold;">{{parseFloat(machineRateSub).toFixed(2)}}%</text>
							<!-- 本周比上周 增长 -->
							<text v-if="runRateFlag == 1" class="cuIcon-usefullfill text-xl margin-left-xs"></text>
							<text v-else-if="runRateFlag == 3"></text>
							<!-- 本周比上周 下降 -->
							<text v-else class="cuIcon-triangledownfill text-bold" style="font-size: 25px;"></text>
						</view>
						<view v-if="runRateFlag == 1" class="text-gray">
							同比增长
							<!-- 同期环比 -->
						</view>
						<view v-else class="text-gray">
							同比下降
							<!-- 同期环比 -->
						</view>
					</view>
					<view class="" style="width: 35%;height: 110px;padding-top: 23px;">
						<l-echart ref="chartGauge2"></l-echart>
					</view>
				</view>
				<view class="flex" style="border-top:#7d7979 1px solid;padding-top: 10px;">
					<view class="margin-right-sm">
						<image src="@/static/image/proposal.png" style="width: 25px;height: 25px"></image>
					</view>
					<!-- 1:上升，2：下降,3:持平 -->
					<view v-if="runRateFlag == 1" class="text-df text-bold">
						本周开机率增长{{parseFloat(machineRateSub).toFixed(2)}}%
					</view>
					<view v-else-if="runRateFlag == 2" class="text-df text-bold">
						本周开机率下降{{parseFloat(machineRateSub).toFixed(2)}}%,{{machineOpenRateList[openKey]}}
					</view>
					<view v-else="runRateFlag == 3" class="text-df text-bold">
						本周开机率持平
					</view>
				</view>
				<!-- 判断模块是否解锁 0：加锁，1：解锁 -->
				<view v-if="!moduleLockList.shouye2.status"
					@click="showModal('DialogModal1',moduleLockList.shouye2)"
					class="lockView">
					<image src="@/static/image/lock.png" mode="aspectFit"></image>
					<view class="locktext">
						解锁此模块提高生产效率
					</view>
				</view>
			</view>
		</view>
		<view class="flex">
			<view class="flex-sub my-bg" style="margin: 0px 0px 0px 10px;">
				<view class="text-white margin-bottom-xs">周故障率</view>
				<view class="lockParent" style="height: 120px">
					<l-echart ref="chartGaugeAlarm"></l-echart>
					<!-- 判断模块是否解锁 0：加锁，1：解锁 -->
					<view v-if="!moduleLockList.shouye3.status" 
						@click="showModal('DialogModal1',moduleLockList.shouye3)"
						class="lockView">
						<image src="@/static/image/lock.png" mode='aspectFit'></image>
						<view class="locktext">
							解锁此模块提高生产效率
						</view>
					</view>
				</view>
			</view>
			<view class="flex-sub my-bg" style="margin: 0px 10px 0px 10px;">
				<view class="text-white margin-bottom-xs">周产品合格率</view>
				<view class="lockParent" style="height: 120px">
					<l-echart ref="chartGaugePass"></l-echart>
					<!-- 判断模块是否解锁 0：加锁，1：解锁 -->
					<view v-if="!moduleLockList.shouye4.status" 
						@click="showModal('DialogModal1',moduleLockList.shouye4)"
						class="lockView">
						<image src="@/static/image/lock.png" mode='aspectFit'></image>
						<view class="locktext">
							解锁此模块提高生产效率
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-bg">
			<view class="text-white margin-bottom-xs">当月设备利用率</view>
			<view class="lockParent" style="height: 200px">
				<l-echart ref="chartPie"></l-echart>
				<!-- 判断模块是否解锁 0：加锁，1：解锁 -->
				<view v-if="!moduleLockList.shouye5.status" 
					@click="showModal('DialogModal1',moduleLockList.shouye5)"
					class="lockView">
					<image src="@/static/image/lock.png" mode="aspectFit"></image>
					<view class="locktext">
						解锁此模块提高生产效率
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		<!-- 大定制 -->	
		<view @click="linktoPage('/pages/center/vip/vip')" 
			style="position: fixed;bottom: 10%;right: 0;">
			<image src="../../static/image/customization.png" style="width: 64px;height: 64px"></image>
		</view>
		<!-- 购买模块 模态框 -->
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog bg-white" style="border-radius: 13px;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two">解锁模块</view>
				</view>
				<view class="margin-bottom-sm">
					<view>
						<image mode='widthFix' src="@/static/image/unLock.png" class="tip-img"></image>
					</view>
					<view>
						<text style="color: #00A99D;font-size: 30px;">{{modulePrice}}</text>
						<text class="text-gray padding-left-xs" style="font-size: 14px;">元</text>
					</view>
					<view class="text-gray" style="font-size: 15px;">
						您确认开通此模块？
					</view>
				</view>
				<view class="cu-bar padding-bottom-sm" style="height: 80px;">
					<view class="action margin-0 flex-sub text-green" @tap="hideModal">
						<button class="cu-btn round lines-green-two padding-lr-lg" style="width: 90%;height: 45px;">
							<text class="text-gray">取消</text>
						</button>
					</view>
					<view class="action margin-0 flex-sub">
						<button  @click="showModalInvoice('fapiaoTip')" class="cu-btn round bg-green-two padding-lr-lg" style="width: 90%;height: 45px;">确认去开票</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 发票过渡提醒框 -->
		<view class="cu-modal" :class="modalName=='fapiaoTip'?'show':''">
			<view class="cu-dialog bg-white" style="border-radius: 13px;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two">发票提醒</view>
				</view>
				<view class="margin-bottom-sm">
					<view>
						<image src="@/static/image/fapiao-tip.png"  mode='widthFix' class="tip-img"></image>
					</view>
					<view class="text-black-two padding-top-sm" style="font-size: 15px;">
						感谢您信任并使用我司开发的产品！
						<br/>
						我司的电子发票统一采取国家税务局
						<br/>
						认证的电子普票。
					</view>
				</view>
				<view class="cu-bar padding-bottom-sm" style="justify-content: center;height: 80px;">
					<view><image src="@/static/image/fapiao-gif.gif" style="width: 64px;height: 64px;"></image></view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog bg-white" style="height: 100px;width: 80%;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two" style="font-size: 14px;">提示</view>
				</view>
				<!-- 提示3：橙色 #ff5722  错误2：红色 red   正确1：绿色 #00A99D  -->
				<view v-if="tipFlag == 3" class="text-black-two" style="font-size: 16px;color: #ff5722;">
					{{resText}}
				</view>
				<view v-else-if="tipFlag == 2" class="text-black-two" style="font-size: 16px;color: red;">
					{{resText}}
				</view>
				<view v-else="tipFlag == 1" class="text-black-two" style="font-size: 16px;color: #00A99D;">
					{{resText}}
				</view>
			</view>
		</view>

		
		<!-- <view class="cu-modal" :class="modalNameVideo=='video'?'show':''" > -->
		<view class="cu-modal show" v-if="isVideoModalType">
			<!-- 1：显示点击事件，0：不显示 -->
				<view class="cu-dialog" @click="clickFlag && stt()" style="border-radius: 13px;background-color:unset">
					<view style="margin-top: 8px;">
						<video id="myvideo" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b9edaef5-4463-4bd3-a03d-539553170d62/213a79c4-cd0d-47fc-9080-20cb3389238f.mp4" 								@timeupdate="getVideoCurrentTime" 
							@ended="videoEnd"
							:controls="false" style="height: 430px;width: 256px;">
						</video>
					</view>
					<view v-if="isHide" class="action" @tap="hideModalVideo">
						<text class="cuIcon-roundclosefill text-blue" style="color: #847d7d;font-size: 30px;"></text>
					</view>
				</view>
		</view>
			
	
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js'

	var _self;
	export default {
		components: {
		},
		data() {
			return {
				tipFlag:0,//提示flag(1:正确，2：错误，3：提示)
				moduleLockList:[],//模块列表
				machineCount:0,//设备总数
				machineRunCount:0,//运行数量
				productWeight:0,//产重
				productNum:0,//产量
				productEnergy:0,//能耗
				machineRateSub:80,//计算同比增长
				runRateFlag:1,//判断本周开机率比上周增长或下降(1:上升，2：下降,3:持平)
				machineRunAdv:'本周开机率增长10%，产量下降，是不是机器出故障了？赶紧派人来检修',//建议
				modalName:null,//弹出是否解锁模块的模态框
				modulePrice:500,//模块价格
				buyModuleInfo:[],//购买当前模块的模块信息
				resText:'',
				isHide:0,
				modalNameVideo:'',
				videoContext:'',
				clickFlag:0,//显示视频的点击事件（0，不显示  1显示）
				isVideoModalType:0,//视频的模态框是否显示（0：不显示，1显示）
				machineOpenRateList:[
					'请查看是否因为气缸损坏导致',
					'请查看是否因为压杆气压不足导致',
					'请查看是否因为驱动器报警导致',
					'请查看是否因为缺料导致',
					'请查看是否因为备料时间过长导致'
				],
				openKey:'',//随机key
				//设备开机时长-柱状图
				optionBarTest: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '1%',
						right: '1%',
						bottom: '1%',
						top:'12%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
						axisLabel: {
							color: "#aaaaaa"
						},
						
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: "#aaaaaa"
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "#62626A"
							}
						},
						axisTick:{
							lineStyle:{
								color:"red"
							}
						},
						splitLine:{
							show: false,
							lineStyle:{
								color: "#62626A"
							}
						}
					},
					//数据区域缩放组件
					 dataZoom: {
					    start: 30,
					    type: "inside",
						zoomLock:true,//只平移不缩放
					  },
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						color: "#FBB03B",
						barWidth: 12
					}]
				},
				optionBar: {
					/* tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						},
						formatter: '{b0}:'+'\n'+' {c0}'
					}, */
					tooltip: {
					  trigger: 'axis',
					  /* axisPointer: {
					    type: 'cross',
					    crossStyle: {
					      color: '#999'
					    }
					  }, */
					  formatter: function (params) {
					    var relVal = params[0].name
					    for (var i = 0, l = params.length; i < l; i++) {
					      relVal += '\n' + params[i].marker + params[i].value +' '+'h'
					    }
					    return relVal
					  }
					},
					grid: {
						left: '1%',
						right: '1%',
						bottom: '1%',
						top:'12%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7'],
						axisLabel: {
							color: "#aaaaaa",
							//interval: 2
						},
						
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: "#aaaaaa"
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "#62626A"
							}
						},
						axisTick:{
							lineStyle:{
								color:"red"
							}
						},
						splitLine:{
							lineStyle:{
								color: "#62626A"
							}
						}
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						color: "#29ABE2",
						barWidth: 12
					}]
				},
				optionGauge1:{
					series: [{
						name: '业务指标',
						type: 'gauge',
						detail: {
							formatter: '{value}%',
							fontSize:18,
							color:"#FFFFFF"
						},
						center: ['50%', '50%'],
						progress: {
							overlap: false,
							show: true,
							roundCap:true,
							itemStyle: {
								color: "#22B573"
							}
						},
						splitLine: {
							show: 0
						},
						axisTick: {
							show: 1,
							splitNumber: 1
						},
						splitNumber: 7,
						axisLabel: {
							show: false
						},
						pointer:{
							length: "50%",
							width: 2,
							itemStyle: {
								color: "#22B573"
							}
						},
						title: {
							show: 1,
							offsetCenter: ["0", "80%"],
							color:"#aaaaaa",
							fontSize:14
						},
						// 起始角度，支持范围[0, 360]
						startAngle: 180,
						endAngle:0,
						axisLine: {
							show: true,
							roundCap:true,
							lineStyle:{
								width:6
							}
						},
						data: [{
							value: 50,
							name: '本周开机率',
						}]
					
					}]
				},
				optionGauge2:{
				   series: [{
					name: '业务指标',
					type: 'gauge',
					detail: {
						formatter: '{value}%',
						fontSize:18,
						color:"#FFFFFF"
					},
					center: ['50%', '50%'],
					progress: {
						overlap: false,
						show: true,
						roundCap:true,
						itemStyle: {
							color: "#22B573"
						}
					},
					splitLine: {
						show: 0
					},
					axisTick: {
						show: 1,
						splitNumber: 1
					},
					splitNumber: 7,
					axisLabel: {
						show: false
					},
					pointer:{
						length: "42%",
						width: 2,
						itemStyle: {
							color: "#22B573"
						}
					},
					title: {
						show: 1,
						offsetCenter: ["0", "90%"],
						color:"#aaaaaa",
						fontSize:14
					},
					// 起始角度，支持范围[0, 360]
					startAngle: 180,
					endAngle:0,
					axisLine: {
						show: true,
						roundCap:true,
						lineStyle:{
							width:6
						}
					},
					data: [{
						value: 40,
						name: '上周开机率',
					}]
							
				   }]
				},
				optionAlarm : {
					series: [{
						type: 'gauge',
						startAngle: 90,
						endAngle: -270,
						pointer: {
							show: false
						},
						progress: {
							show: true,
							overlap: false,
							roundCap: true,
							clip: false,
							itemStyle: {
								// borderWidth: 1,
								color: "#29ABE2",
								//borderColor: '#464646'
							},
						},
						axisLine: {
							lineStyle: {
								width: 10
							}
						},
						splitLine: {
							show: false,
							distance: 0,
							length: 10
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false,
							distance: 14
						},
						data: [
							{
							value: 20,
							detail: {
							offsetCenter: ['0%', '0%']
							}
						}
						],
						detail: {
							// width: 50,
							// height: 14,
							fontSize: 18,
							color: '#FFFFFF',

							// borderRadius: 20,
							// borderWidth: 1,
							formatter: '{value}%'
						}
					}]
				},
				optionPass : {
					series: [{
						type: 'gauge',
						startAngle: 90,
						endAngle: -270,
						pointer: {
							show: false
						},
						progress: {
							show: true,
							overlap: false,
							roundCap: true,
							clip: false,
							itemStyle: {
								// borderWidth: 1,
								color: "#29ABE2",
								//borderColor: '#464646'
							},
						},
						axisLine: {
							lineStyle: {
								width: 10
							}
						},
						splitLine: {
							show: false,
							distance: 0,
							length: 10
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false,
							distance: 14
						},
						data: [
							{
							value: 50,
							detail: {
							offsetCenter: ['0%', '0%']
							}
						}
						],
						detail: {
							// width: 50,
							// height: 14,
							fontSize: 18,
							color: '#FFFFFF',
				
							// borderRadius: 20,
							// borderWidth: 1,
							formatter: '{value}%'
						}
					}]
				},
				optionPie:{
					tooltip: {
						trigger: 'item',
						formatter: function (params) {
							var relVal = params.marker + params.data.name +'  '+ params.data.value +' '+'h';
							return relVal
						}
					},
					legend: {
						orient: 'horizontal',
						bottom: 0,
						padding: [100, 50, 0, 5],
						textStyle: {
							color: "#aaaaaa",
							lineHeight: 1
						},
						height: "1%"
					},
					series: [
						{
							top: 0,
							bottom:"12%",
							minAngle: 4,
							selectedMode: "single",
							avoidLabelOverlap: true,
							name: '',
							type: 'pie',
							radius: ["69%", "48%"],
							avoidLabelOverlap: false,
							// label: {
							// 	show: true,
							// 	position: 'center',
							// 	color: "#aaaaaa"
							// },
							/* label: {
								// normal: {
								// 	show: true,
								// 	position: 'center',
								// 	color:'#9A9EBA',
								// 	formatter: '状态占比',//饼图中间文字设置
								// },
								
								 			    
							      alignTo: 'edge',
							      formatter: '{name|{b}}\n{value|{d}% - {c}h}',
							      minMargin: 100,
							      edgeDistance: 10,
							      lineHeight: 15,
							      rich: { value: { fontSize: 10, color: '#999999' } }
							    },
							emphasis: {//中间文字显示
								//show: true,
							},
							labelLine: {
								show: true,
								length: 30
							}, */
							label: {
								show: false,
								position: 'center',
								color: "#aaaaaa"
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '15',
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: true,
								length: 80
							},
							data: [
								{value: 1048, name: '运行'},
								{value: 735, name: '待机'},
								{value: 580, name: '调机'},
								{value: 484, name: '报警'},
							]
						}
					]
				},
			}
		},
		async mounted() {
			/* //设备开机时长-柱状图
			this.$refs.chartBar.init(echarts, chartBar=> {
				chartBar.setOption(this.optionBar);
			}); 
			//本周开机率
			this.$refs.chartGauge1.init(echarts, chartGauge1=> {
				chartGauge1.setOption(this.optionGauge1);
			});
			//上周开机率
			this.$refs.chartGauge2.init(echarts, chartGauge2=> {
				chartGauge2.setOption(this.optionGauge2);
			});
			//周故障率
			this.$refs.chartGaugeAlarm.init(echarts, chartGaugeAlarm=> {
				chartGaugeAlarm.setOption(this.optionAlarm)
				// setInterval(() => {
				// 	this.optionAlarm.series[0].pointer.show = false;
				// 	this.optionAlarm.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
				// 	chartGaugeAlarm.setOption(this.optionAlarm, true);
				// }, 2000);
			});
			
			//周产品合格率
			this.$refs.chartGaugePass.init(echarts, chartGaugePass=> {
				chartGaugePass.setOption(this.optionPass)
			});
			//当月设备利用率
			this.$refs.chartPie.init(echarts, chartPie=> {
				chartPie.setOption(this.optionPie);
			}); */
			
		},
		onShow() {
			_self = this;
			//获取随机数
			let rateNum = Math.random(0,4);
			this.openKey = Math.floor(Math.random() * (4 - 0) ) + 0;
			//获取当前登录账号的客户ID
			this.client_id = uni.getStorageSync("userInfo").clientID;
			//获取模块购买列表
			this.getModelLockData();
			//获取首页数据
			this.getInitData();
			//判断是否授权
			this.videoContext = uni.createVideoContext('myvideo',this);
			this.getUserInfo();
			console.log('ddd');
			console.log(this.modalNameVideo);
		},
		onHide() {
			this.isVideoModalType = 0;
			this.modalName = null;
			this.videoContext.stop();
			this.modalNameVideo = null;
			this.clickFlag = 0;
			uni.showTabBar();
		},
		methods:{
			//当播放到末尾时
			videoEnd(){
				//显示视频的点击事件
				this.clickFlag = 1;
			},
			stt(){
				console.log(11231);
				this.videoContext.stop();
				this.modalNameVideo = null;
				uni.navigateTo({
					url:'/pages/center/yue/yue'
				})
			},
			//监听当前视频播放时长
			getVideoCurrentTime(e){
				if (e.detail.currentTime > 3) {
					this.isHide = 1;//显示关闭
				}
				if (e.detail.currentTime > 69) {
					this.clickFlag = 1
				}
			},
			//获取模块列表，判断是否购买，未购买则加锁
			async getModelLockData(){
				// 请求登录
				let [err,res] = await this.$http.post('getModelList',{position:1},{
					token:true,
					checkToken:true ,
				});
				//status：0（加锁），1：解锁
				this.moduleLockList = res.data.data;
			},
			// 获取首页数据
			async getInitData(){
				uni.showLoading({ title: '加载中...', mask: true });
				// 请求登录
				let [err,res] = await this.$http.post('getHomeList',{},{
					token:true,
					checkToken:true ,
				});
				// 登录失败
				if (!this.$http.errorCheck(err,res)){
					uni.hideLoading();
					return false;
				}
				uni.hideLoading();
				//设备总数
				this.machineCount = res.data.data.count;
				//当班实时运行数量
				this.machineRunCount = res.data.data.yx;
				//当班实时产重
				this.productWeight = res.data.data.dbcz;
				//当班实时产量
				this.productNum = res.data.data.dbcl;
				//当班实时能耗
				this.productEnergy = res.data.data.dbnh;
				//设备开机时长：x轴
				this.optionBar.xAxis.data = res.data.data.machineOpenTime.dataBarxAxis;		
				//设备开机时长：y轴
				this.optionBar.series[0].data = res.data.data.machineOpenTime.dataBaryAxis;
				//设备开机时长-柱状图
				this.$refs.chartBar.init(echarts, chartBar=> {
					chartBar.setOption(this.optionBar);
				});
				//本周开机率
				this.optionGauge1.series[0].data[0].value = res.data.data.openMachineRate;
				this.$refs.chartGauge1.init(echarts, chartGauge1=> {
					chartGauge1.setOption(this.optionGauge1);
				});
				//上周开机率
				this.optionGauge2.series[0].data[0].value = res.data.data.upopenMachineRate;
				this.$refs.chartGauge2.init(echarts, chartGauge2=> {
					chartGauge2.setOption(this.optionGauge2);
				});
				//计算同比增长 （本周开机率 - 上周开机率 ??今年与去年的同比公式＝今年本期数据/去年同期数据×100%）
				//this.machineRateSub = parseInt(res.data.data.openMachineRate)-parseInt(res.data.data.upopenMachineRate);
				this.machineRateSub = res.data.data.openMachineRate-res.data.data.upopenMachineRate;
					
				if (this.machineRateSub > 0) {
					//上升
					this.runRateFlag = 1;
				} else if(this.machineRateSub == 0){
					//持平
					this.runRateFlag = 3;
				} else {
					//下降
					this.machineRateSub = Math.abs(this.machineRateSub);//取负数绝对值的方式将负数转为正数
					this.runRateFlag = 2;
				}
				//周故障率
				this.optionAlarm.series[0].data[0].value = res.data.data.weekGuzhangRate;
				this.$refs.chartGaugeAlarm.init(echarts, chartGaugeAlarm=> {
					chartGaugeAlarm.setOption(this.optionAlarm)
				});
				//周产品合格率				
				this.optionPass.series[0].data[0].value = res.data.data.weekHegeRate;
				this.$refs.chartGaugePass.init(echarts, chartGaugePass=> {
					chartGaugePass.setOption(this.optionPass)
				});
				//当月设备利用率
				this.optionPie.series[0].data = res.data.data.mothMachineRate;
				this.$refs.chartPie.init(echarts, chartPie=> {
					chartPie.setOption(this.optionPie);
				});
				//return true;
			},
			//跳转页面
			linktoPage(urlStr){
				uni.navigateTo({
					url:urlStr
				})
			},
			//打开模态框
			showModal(name,data=null){
				this.modalName=name
				this.buyModuleInfo = data;//购买该模块的信息
				this.modulePrice = data.module_price;//购买该模块的价格
			},
			//隐藏模态框
			hideModal(e) {
				this.modalName = null;
				
			},
			//关闭视频
			hideModalVideo(){
				if(this.modalName != 'auth'){
					uni.showTabBar();
				}
				this.isVideoModalType = 0;
				this.videoContext.stop();
				this.modalNameVideo = null;
				this.clickFlag = 0;
				console.log('333');
			},
			//发票过渡
			showModalInvoice(name){
				//获取当前登录用户实时余额
				let currentYue = uni.getStorageSync("userinfo").money;
				//获取用户余额，判断余额是否足够
				if (parseInt(currentYue) >= parseInt(this.modulePrice)) {
					//余额足够跳转到发票页
					this.modalName=name;
					setTimeout(function () {
						_self.modalName = null
						_self.buyModule();
					},3000);
				} else {
					//余额不足提示请充值，跳转到余额充值页
					this.showModalTip('余额不足请充值',3);
					setTimeout(function () {
						_self.hideModalTip();
						uni.navigateTo({
							url:'/pages/center/yue/yue',
						})
					}, 2000);
				}
			},
			//确认购买模块跳转到发票页
			buyModule(){
				//购买该模块的信息
				let data = JSON.stringify(this.buyModuleInfo);
				uni.navigateTo({
					url:'/pages/center/fapiao/buy-module-fapiao?moduleInfo='+data,
				})	
			},
			//打开模态框
			showModalTip(val,isflag){
				this.modalName='Modal';
				this.resText = val;
				this.tipFlag = isflag;
			},
			//隐藏模态框
			hideModalTip(e) {
				this.modalName = null
				this.resText = '';
			},
			//查询用户表判断该用户是否微信授权
			async getUserInfo(){
				let userId = uni.getStorageSync("userinfo").id;
				uni.showLoading({ title: '加载中...', mask: true });
				// 请求登录
				let [err,res] = await this.$http.post('getUserSingle',{user_id:userId},{
					token:true,
					checkToken:true ,
				});
				// 登录失败
				if (!this.$http.errorCheck(err,res)){
					uni.hideLoading();
					return false;
				}
				uni.hideLoading();
				//1是首次充值，0不是
				if (res.data.data.is_shouchong) {
					//首冲
					this.isVideoModalType = 1;
					//this.modalNameVideo = 'video';
					this.videoContext.play();
					uni.hideTabBar();//隐藏底部tabBar
					console.log('未充值');
					console.log(this.isVideoModalType);
				} else {
					//有记录，不是首冲
					uni.showTabBar();
					this.isVideoModalType = 0;
				}
			},
		}
	}
</script>

<style>

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts3 {
		width: 350upx;
		height: 250upx;
		/* background-color: #FFFFFF; */
		position: relative;
	}
	
	.bg-dark{
		background-color: #202020;
	}
	
	.border-dark{
		border-right-color:#23CE9A ;
	}
	
	.border-light{
		border-right:solid 1px #19191A ;
	}
	.charts-box {
	  width: 100%;
	  height: 270px;
	}
	.aa {
		width: 95%;
		height: 270px;
		background: #393948de;
		margin-top: -270px;
		border-radius: 20px;
		margin-left:10px;
		position: absolute;
	}
	
	.aa image {
		width: 150px;
		height: 150px;
		position: absolute;
		top: 20%;
		left: 30%;
	}
	
	
	.grey-box {
		height: 40px;
		background: #171723;
		/* border-top-left-radius: 5px;
		border-top-right-radius: 5px; */
		padding: 0px 10px;
		font-size: 15px;
		font-family: "Microsoft YaHei";
		color: #fff;
		line-height: 40px;
		margin-bottom: 5px;
		cursor: pointer;
	}
	
	.qq-content {
		font-size: 14px;
		margin-top: -5px;
		margin-bottom: 12px;
		background: #424250;
		padding: 12px 2px 6px 2px;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		color: #FFF;
	}
</style>
